<table>
    <thead>
        <tr>
            <th>Banner Images</th>
            <th>Images from the server</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" valign="top">
                <div class="banner-images-wrapper">
                    <ul id="banner-images" class="">

                    </ul>
                </div>
                <?= generate_input_element('delete',array('type'=>'button','value'=>'Delete','class'=>'del_image')) ?>
                <small>Select an image banner to delete</small>
            </td>
            <td align="center" valign="top">
                <div class="images-wrapper">
                    <ul id="images" class="" >
                        <?php if($images):?>
                        <?php foreach ($images->result_array() as $v):?>
                        <li>
                            <img class="image" index="image_<?= $v['id']?>" src="<?= BASE_URL. $v['thumbnail'] ?>">
                        </li>
                        <?php endforeach;?>
                        <?php endif;?>
                    </ul>
                </div>
                    
                <div class="pages-wrapper hide">
                    <ul id="pages" class="" >
                        <?php if($pages):?>
                        <?php foreach ($pages->result_array() as $v):?>
                        <li>
                            <span class="page" value="<?= $v['title'] ?>" index="page_<?= $v['id'] ?>" ><?= $v['title'] ?></span>
                        </li>
                        <?php endforeach;?>
                        <?php endif;?>
                    </ul>
                </div>
                    
            </td>
        </tr>    
        <tr>
            <td colspan="2" align="center">
                DRAG IMAGE FROM THE SERVER TO YOUR BANNER IMAGE!
            </td>
        </tr>
    </tbody>
</table>

                

